<template>
  <div class="box">
    <div class="clearfix">
      <div
        class="skeleton left"
        style="width:99%;position:relative;"
      >
        <div
          class="skeleton_title left"
          v-if="name.length<3"
        >
          {{((name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}
        </div>
        <div
          class="skeleton_title left"
          v-if="name.length>=3"
        >
          {{((name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}
        </div>
        <div class="skeleton_content left">
          <ul>
            <li>{{Originator.name}}</li>
            <li style="margin-bottom:10px">{{Originator.create_date}}</li>
            <li style="width:138px">{{Originator.event_name}}</li>
            <li style=" font-size: 13px;margin-bottom:10px">{{Originator.event_desc}}</li>
            <li>{{Originator.date}}</li>
          </ul>
        </div>
        <div
          class="right"
          style="position:absolute;bottom:10px;right:28px"
          v-for="(item,i) in status"
          :key="i"
        >
          <p
            class="right"
            style="font-size:14px;"
            v-if="Originator.status==item.index"
          ><span
              v-if="item.name=='通过'"
              style="color:dodgerblue;"
            >{{item.name}}</span><span
              v-else
              style="color:silver;"
            >{{item.name}}</span></p>
        </div>
        <div
          v-for="(li,j) in images"
          :key="j+'p'"
        >
          <img
            v-if="li.i==Originator.status"
            style="height:130px;margin-left:10px;"
            :src="li.url"
          >
        </div>
      </div>
    </div>
    <div style="font-size:17px;padding:10px;text-align: left;background:#f8f8fa">奖扣对象</div>
    <div v-if="Prizewinner.length>0">
      <div
        style="padding:10px;background:#fff;border-bottom:1px solid #e2e2e2;text-align: left;"
        v-for="(item,i) in Prizewinner"
        :key="i"
      >
        <span>{{item.name}}</span>
        <span style="margin-left:50px">{{D_name}}: {{item.code_b}}</span>
        <span
          style="margin-left:25px"
          v-if="item.code_c!=0 && ISC == 1"
        >{{C_name}}: {{item.code_c}}</span>
      </div>
    </div>
    <div
      style="padding:10px;background:#fff;text-align: left;"
      v-else-if="Object.keys(Prizewinner).length!=0"
    >
      <span>{{Prizewinner.name}}</span>
      <span style="margin-left:50px">{{D_name}}: {{Prizewinner.code_b}}</span>
      <span
        style="margin-left:25px"
        v-if="Prizewinner.code_c!=0 && ISC == 1"
      >{{C_name}}: {{Prizewinner.code_c}}</span>
    </div>
    <div v-if="fileList.length!=0" class="clearfix" style="padding:10px 0px 0px 12px">
      <div class="left" style="width:100px;text-align:left">图片</div>
      <div class="left" style="width:200px;text-align:left">
        <van-uploader
          v-model="fileList"
          :deletable='false' 
          :show-upload='false'
        />
      </div>
    </div>

    <!-- <van-image-preview multiple
      v-model="show"
      :images="fileList"
      @change="onChange"
    >
      <template v-slot:index>{{index+1}}/{{fileList.length}}</template>
    </van-image-preview>
    <div
      class="details_list"
      style="border-bottom:1px solid silver"
      v-if="fileList.length!=0"
    >
      <span style="display: inline-block;width: 90px;">图片</span><span
        v-for="(img , s) in fileList"
        :key="s"
        style="display:inlin-block"
      ><img
          @click="show_file(img)"
          style="height:80px;margin-right:5px;vertical-align:middle"
          :src="img"
        ></span>
    </div> -->
    <!-- <div
      style="background:#fff;padding:10px;text-align: left;"
      v-if='list.image.length!=0'
    ><span style="margin-right:50px">附件</span>
      <van-uploader
        :file-list="fileList"
        disabled
        :deletable='false'
      />
    </div> -->
    <!-- <van-icon name="circle" /> -->
    <div style="background:#f8f8fa;height:10px"></div>
    <div
      style="text-align: left;"
      v-if="type==1"
    >
      <van-steps
        direction="vertical"
        :active="0"
        active-icon="passed"
        active-color="#38f"
      >
        <van-step>
          <h3>终审</h3>
          <p>{{Auditor.end}}</p>
          <p>{{Auditor.end_remark}}</p>
          <p style="color:silver">{{Auditor.endDate}}</p>
        </van-step>
        <van-step>
          <h3>初审</h3>
          <p>{{Auditor.first}}</p>
          <p>{{Auditor.first_remark}}</p>
          <p style="color:silver">{{Auditor.firstDate}}</p>
        </van-step>
      </van-steps>
    </div>
    <div v-if="type==2">
      <div
        class="public"
        style="border-bottom:1px solid #e2e2e2;"
      >
        <span
          class="left"
          style="margin-left:4vw"
        >初审</span><span
          class="left"
          style="margin-left:16vw"
        >{{Auditor.first}}</span>
      </div>
      <div
        class="public"
        style="border-bottom:1px solid #e2e2e2"
      >
        <span
          class="left"
          style="margin-left:4vw"
        >终审</span><span
          class="left"
          style="margin-left:16vw"
        >{{Auditor.end}}</span>
      </div>
    </div>
    <van-button
      v-if='Originator.status=="0"&&type==2'
      round
      :style="{margin:'25px 10px 10px',width:'95%',height:'5.5vh',lineHeight:'5.5vh'}"
      color="#3C9BFB"
      @click="showrecall()"
    >撤回</van-button>
  </div>
</template>

<script type="text/javascript">
import { Step, Steps, Uploader, Button, Dialog,Toast } from "vant";

export default {
  data() {
    return {
      type: 0,
      list: [],
      fileList: [],
      status: [
        {
          index: 0,
          name: "初审中"
        },
        {
          index: 1,
          name: "终审中"
        },
        {
          index: 2,
          name: "通过"
        },
        {
          index: 3,
          name: "驳回"
        },
        {
          index: 4,
          name: "撤回"
        }
      ],
       images: [
        { url: "", i: 2 },
        {
          url: "",
          i: 3
        },
        {
          url: "",
          i: 4
        }
      ],
      recall_id: 0,
      C_name: "",
      D_name: "",
      show: false,
      index: 0,
      Originator: {},
      name: "",
      Prizewinner: {},
      Auditor: {},
      ISC:''
    };
  },
  components: {
    [Step.name]: Step,
    [Steps.name]: Steps,
    [Uploader.name]: Uploader,
    [Button.name]: Button,
    [Toast.name]:Toast
  },
  created() {
    this.C_name = localStorage.getItem("c_name");
    this.D_name = localStorage.getItem("d_name");
    this.participationDetails();
    this.getIsC();
    dd.biz.navigation.setTitle({
      title: "积分详情" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    onChange(index) {
      this.index = index;
    },
    show_file(img) {
      this.show = true;
    },
     //C分开关
    async getIsC(){
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getIsC?corpId=${corpId}`
      );
      // localStorage.setItem("ISC", res.data.data.is_c_code);
      this.ISC = res.data.data.is_c_code
    },
    // 撤回
    async showrecall() {
      const id = this.recall_id;
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      Toast.loading({
        message: "数据提交中",
        forbidClick: true,
        loadingType: "spinner"
      });
      const res = await this.$http.get(
        `yuepoints/withdraw?corpId=${corpId}&userId=${userId}&id=${id}`
      );
      if (res.data.errcode == "0000") {
        Toast.success("撤回成功");
        this.$router.replace("/record");
      }
    },
    async participationDetails() {
      const id = this.$route.query.id;
      const type = this.$route.query.status;
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      let res;
      if (type == 1) {
        this.type = 1;
        res = await this.$http.get(
          `yuepoints/participationDetails?corpId=${corpId}&userId=${userId}&id=${id}`
        );
      } else if (type == 2) {
        this.type = 2;
        res = await this.$http.get(
          `yuepoints/submissionDetails?corpId=${corpId}&userId=${userId}&id=${id}`
        );
      }
      if (res.data.data != "") {
        this.list = res.data.data;
        this.Originator = this.list.Originator;
        this.name = this.list.Originator.name;
        this.Prizewinner = this.list.Prizewinner;
        this.Auditor = this.list.Auditor;
        let List = [];
        List = res.data.data.image;
        for (let i = 0; i < List.length; i++) {
          this.fileList.push({ url: List[i] });
        }
        this.recall_id = res.data.data.id;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  overflow-y: hidden;
  font-size: 15px;
  padding-bottom: 55px;
  .details_list {
    font-size: 16px;
    text-align: left;
    padding: 15px 20px 15px 18px;
    border-top: 1px solid silver;
    background: #fff;
    li {
      margin-bottom: 5px;
      span:nth-child(1) {
        display: inline-block;
        width: 90px;
        vertical-align: middle;
      }
    }
  }
  /deep/ .van-uploader {
    vertical-align: middle;
  }
  /deep/ .van-uploader__upload {
    display: none;
  }
  p,
  h3 {
    margin: 0px;
  }
  /deep/ .van-step__circle-container {
    font-size: 15px;
  }
  /deep/ .van-step__title {
    font-size: 13px;
  }
  /deep/ .van-steps {
    padding: 10px 60px;
  }
  .skeleton {
    background: #fff;
    padding: 15px 0px 25px 15px;
    text-align: left;
    .skeleton_title {
      color: #fff;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      text-align: center;
      line-height: 48px;
      background: rgb(89, 209, 255);
      font-size: 16px;
      margin-right: 15px;
      // border: 1px solid silver
    }
    .skeleton_content {
      li {
        font-size: 16px;
      }
      li:nth-child(2) {
        font-size: 13px;
        color: silver;
      }
      li:nth-child(5),
      li:nth-child(6) {
        font-size: 13px;
        margin-top: 10px;
        color: rgb(117, 116, 116);
      }
    }
    /deep/ .van-icon {
      color: silver;
      font-size: 19px;
    }
  }
  .public {
    height: 7vh;
    line-height: 7vh;
    background: #fff;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
